<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('综合图表')" />
</head>
<body>
<div class="container-div">
    <div class="row" style="margin-top: 30px;height: auto">
        <div class="col-md-6">
            <div id="simplePie" class="echarts" style="width:100%;height:400px"></div>
        </div>
        <div class="col-md-6">
            <div id="simpleBar" class="echarts" style="width:100%;height:400px"></div>
        </div>
    </div>
    <div class="row" style="height: auto">
        <div class="col-md-6">
            <div id="simpleLine" class="echarts" style="width:100%;height:400px"></div>
        </div>
        <div class="col-md-6">
            <div id="simpleMix" class="echarts" style="width:100%;height:400px"></div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script>
    $(function() {
        //饼图
        $.ajax({
            url: '/hdw/qry/chart/baseQry',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({"shapeStyleVO":{"title":"基础饼图样例","shapeType":"pie","shapeXVO":{"fieldName":"NA_DIM_NURSINGLEVEL"},"shapeYVOList":[{"name":"IDX_HLDJ","formatter":"人次"}]},"queryParamVO":{}}),
            success: function (result) {
                if(result.code==0) {
                    var option = eval('(' + result.data + ')');
                    var echartsInstance=echarts.init(document.getElementById('simplePie'));
                    echartsInstance.setOption(option);
                }
            }
        });
        //柱图
        $.ajax({
            url: '/echar/demo/bar',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({"shapeStyleVO":{"title":"基础柱状图样例","shapeType":"bar","shapeXVO":{"fieldName":"NA_DIM_NURSINGLEVEL"},"shapeYVOList":[{"name":"IDX_HLDJ","formatter":"人次"}]},"queryParamVO":{}}),
            success: function (result) {
                if(result.code==0) {

                    var option = eval('(' + result.data + ')');
                    var echartsInstance=echarts.init(document.getElementById('simpleBar'));
                    echartsInstance.setOption(option);
                }
            }
        });
    });
    var dataSetData = {
        source: [
            ['产品', '2015', '2016', '2017'],
            ['AA', 43.3, 85.8, 93.7],
            ['BB', 83.1, 73.4, 55.1],
            ['CC', 86.4, 65.2, 82.5],
            ['DD', 72.4, 53.9, 39.1]
        ]
    };
    var simleLineoption = {
        dataset:dataSetData,
        title:{text:'基础折线图测验'},
        color: colorData,
        xAxis: {
            type: 'category'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            //data: ['job1', 'job2', 'job3']
        },
        yAxis: {},
        series: [
            {
                name:'job1',
                type: 'line'
            },
            {
                name:'job2',
                type: 'line'
            },
            {
                name:'job3',
                type: 'line'
            }
        ]
    };
    var simleBaroption = {
        dataset:dataSetData,
        title:{text:'基础柱图测验'},
        color: colorData,
        xAxis: {
            type: 'category'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['job1', 'job2', 'job3']
        },
        yAxis: {},
        series: [
            {
                name:'job1',
                type: 'bar',
                stack: 'x',
                barMaxWidth:40,
            },
            {
                name:'job2',
                type: 'bar',
                stack: 'x',
                barMaxWidth:40,
            },
            {
                name:'job3',
                type: 'bar',
                stack: 'x',
                barMaxWidth:40,
            }
        ]
    };
    var simlePieoption = {
        dataset:dataSetData,
        title:{text:'基础饼图测验'},
        color: colorData,
        xAxis: {
            type: 'category'
        },
        tooltip: {
            trigger: 'item'
        },
        yAxis: {},
        series: [
            {
                name:'job1',
                type: 'pie'
            },
            {
                name:'job2',
                type: 'pie'
            },
            {
                name:'job3',
                type: 'pie'
            }
        ]
    };
    var simleMixoption = {
        dataset:dataSetData,
        title:{text:'混合图测验'},
        color: colorData,
        xAxis: {
            type: 'category'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['job1', 'job2', 'job3']
        },
        yAxis: {},
        series: [
            {
                name:'job1',
                type: 'bar',
                barMaxWidth:40,
            },
            {
                name:'job2',
                type: 'line'
            },
            {
                name:'job3',
                type: 'line'
            }
        ]
    };
    /*var echartsInstance=echarts.init(document.getElementById('simpleLine'));
    echartsInstance.setOption(simleLineoption);
    echartsInstance=echarts.init(document.getElementById('simpleBar'));
    echartsInstance.setOption(simleBaroption);
    echartsInstance=echarts.init(document.getElementById('simplePie'));
    echartsInstance.setOption(simlePieoption);
    echartsInstance=echarts.init(document.getElementById('simpleMix'));
    echartsInstance.setOption(simleMixoption);*/

</script>
</body>
</html>